<template>
  <div class="employee-container">
    <!-- 左 -->
    <div class="left">
      <div class="l-search">
        <el-input
          v-model="form.keyword"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          @input="doSerch"
        >
        </el-input>
        <!-- 树 -->
        <el-tree
          ref="treeRef"
          :data="departmentList"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          highlight-current
          node-key="id"
          @current-change="treeCurrentChange"
        ></el-tree>
      </div>
      <div class="l-tree"></div>
    </div>
    <!-- 右 -->
    <div class="right">
      <!-- 按钮组 -->
      <el-row class="btn-group" type="flex" justify="end">
        <el-button size="mini" type="primary" @click="addEmployee">添加员工</el-button>
        <el-button size="mini" @click="importExcell">excel导入</el-button>
        <el-button size="mini" @click="exportExcell">excel导出</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="头像"
          width="180"
        >
          <template v-slot="{row}">
            <img v-if="row?.staffPhoto" class="staffPhoto" :src="row.staffPhoto" alt="">
            <div v-else class="staffPhoto">{{ row?.username.charAt(0) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="workNumber"
          label="工号"
        >
        </el-table-column>
        <el-table-column
          label="聘用形式"
        >
          <template v-slot="{row}">
            <span>{{ row.formOfEmployment===1?'正式':'非正式' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="部门"
        >
        </el-table-column>
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>
            <el-button class="btnEdit" type="text" size="small">角色</el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @onConfirm="deleteEmployee(row.id)"
            >
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-pagination
        :total="total"
        :page-size="form.pagesize"
        :current-page="form.page"
        layout="total,prev, pager, next"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
    <ExportExcel :showExcelDialog.sync="showDialog" :updateList="getUserList"></ExportExcel>
  </div>
</template>

<script>
import { companyDepartmentRequest } from '@/api/department'
import { getUserListRequest, exportExcelRequest, deleteEmployeeRequest } from '@/api/employee'
import { transformListToTree } from '@/utils/index'
import { saveAs } from 'file-saver'
import { debounce } from 'lodash'
import ExportExcel from '@/views/employee/components/exportExcel.vue'
export default {
  components: {
    ExportExcel
  },
  data() {
    return {
      departmentList: [],
      form: {
        keyword: '',
        page: 1,
        pagesize: 8,
        departmentId: null
      },
      total: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      showDialog: false
    }
  },
  created() {
    this.getDepartmentList()
    // 防抖
    this.doSerch = debounce(this.doSerch, 500)
  },
  methods: {

    // 获取部门列表方法
    async getDepartmentList() {
      try {
        const res = await companyDepartmentRequest()
        this.departmentList = transformListToTree(res.data, 0)
        this.form.departmentId = this.departmentList[0].id
      } catch (error) {
        //
      }

      // 高亮
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(this.form.departmentId)
      })
      // 继续获取人员信息
      this.getUserList()
    },
    // 获取获取用户列表方法
    async getUserList() {
      try {
        const userRes = await getUserListRequest(this.form)
        this.total = userRes.data.total
        this.tableData = userRes.data.rows
      } catch (error) {
        //
      }
    },
    // 树当前值改变
    treeCurrentChange(current) {
      this.form.departmentId = current.id
      // 初始化请求当前页
      this.form.page = 1
      this.getUserList()
    },
    // 分页当前值改变
    currentChange(val) {
      this.form.page = val
      this.getUserList()
    },
    // 搜索框改变
    doSerch() {
      this.getUserList()
    },
    // 删除
    async deleteEmployee(id) {
      try {
        await deleteEmployeeRequest(id)
        this.$message.success('删除成功')
        this.getUserList()
      } catch (error) {
        //
      }
    },
    // 导出excel
    async exportExcell() {
      const res = await exportExcelRequest()
      console.log(res)
      saveAs(res, '所有员工信息.xlsx')
    },
    // 导入excel
    importExcell() {
      this.showDialog = true
    },
    addEmployee() {
      this.$router.push('employee/detail')
    }
  }

}
</script>

<style lang="scss" scoped>
.employee-container{
  display: flex;
  min-height: 50vh;
  .left{
    flex:1;
    padding: 20px;
    border-right: 1px solid #e5e5e5;
  }
  .right{
    flex: 4;
    padding-top: 20px;
    .btn-group{
      margin-right: 60px;
      margin-bottom: 20px;
    }
    .el-table{
      .staffPhoto{
        width: 40px;
        height: 40px;
        margin-left: 60px;
        border-radius: 10px;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        background-color: #1465b1;
        color: #fff;
      }
      .btnEdit{
        margin: 0 10px;
      }
    }
      .el-pagination{
        margin-top: 10px;
        text-align: right;
      }
  }
}

</style>
